<template>
  <div class="bs">
    <!-- 大括号中加$ -->
    <ul class="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
      <li>60</li>
      <li>61</li>
      <li>62</li>
      <li>63</li>
      <li>64</li>
      <li>65</li>
      <li>66</li>
      <li>67</li>
      <li>68</li>
      <li>69</li>
      <li>70</li>
      <li>71</li>
      <li>72</li>
      <li>73</li>
      <li>74</li>
      <li>75</li>
      <li>76</li>
      <li>77</li>
      <li>78</li>
      <li>79</li>
      <li>80</li>
      <li>81</li>
      <li>82</li>
      <li>83</li>
      <li>84</li>
      <li>85</li>
      <li>86</li>
      <li>87</li>
      <li>88</li>
      <li>89</li>
      <li>90</li>
      <li>91</li>
      <li>92</li>
      <li>93</li>
      <li>94</li>
      <li>95</li>
      <li>96</li>
      <li>97</li>
      <li>98</li>
      <li>99</li>
      <li>100</li>
    </ul>
  </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      bscroll: null,
    };
  },
  // 使用better-scroll插件

  // 这个插件不能用在create生命周期函数里面，因为create生命周期函数只是组件创建好了，但是template模板没有挂载上去（页面不显示任何东西），则dom元素并没有被渲染上去。而mounted生命周期函数是dom元素已经渲染成功，则放在mounted中。

  // 使用这个插件的时候，子元素标签必须只有一个，且获取元素是获取父元素

  // 注意：一般插件都是在mounted函数中使用，在create函数中不能拿到dom元素

  mounted() {
    // '.bs'是所要挂载需要滚动的元素（谁需要滚动，就挂载谁）
    // prodeType。当这个属性值为0或1时，不能实时侦测滚动的位置。当这个值为2时手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测。当值为3时，只要是滚动，都能侦测
    this.bscroll = new BScroll(".bs", {
      probeType: 3,
      pullUpLoad: true,
      // observeDOM:true
      // pullUpLoad:true   这属性是能够加载上拉更多
    });
    // 这个参数函数的参数("scroll", (position)是固定写法，position是滚动的位置。下面这个this.bscroll.on是配合probeType使用的
    this.bscroll.on("scroll", (position) => {
      // console.log(position);
    });
    // 这个this.bscroll.on是配合pullUpLoad使用的,"pullingUp"参数是固定写法但是参数函数不需要参数
    this.bscroll.on("pullingUp", () => {
      console.log("给我拉");
    });
  },
};
</script>

<style scoped>
/* 这个scoped是给这个样式定个作用域，则这个.bs样式只能在这个组件使用。 */

/* 这里是局部滚动，则需要设置局部滚动的高度 */
.bs {
  height: 150px;
  overflow: hidden;
  /* overflow: hidden;是超出这个高度的被隐藏起来 */
}
</style>